{% extends 'curatorship/page.html' %}

{% block content %}
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["areachart"]});
      //google.setOnLoadCallback(drawChart);
    </script>

<form method="post" action=".">{% csrf_token %}
	<table>
		{% for field in form %}
		<tr>
			<td class="label"><label for="{{ field.label }}">{{ field.label_tag }}:</label></td>
			<td>{{ field }}</td>
			<td>
				{% if field.errors %}<div class="error_text">{{ field.errors }}</div>{% endif %}
				{% if field.help_text %}<div class="help_text">{{ field.help_text}}</div>{% endif %}
			</td>
		</tr>
		{% endfor %}
		<tr>
			<td colspan="2">
				<input type="submit">
			</td>
		</tr>
	</table>
</form>
{% for pupil in pupils %}
	<div id="chart{{ pupil.id }}"></div>
    <script type="text/javascript">
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Даты');
		{% for subject in subjects %}
	        data.addColumn('number', '{{ subject }}');
		{% endfor %}
        data.addRows([
						{% for date in pupil.dates %}
							[{{ date|safe }}],
						{% endfor %}
					]);
        var chart = new google.visualization.AreaChart(document.getElementById('chart{{ pupil.id }}'));
        chart.draw(data, {width: 700, height: 400, legend: 'right', title: '{{ pupil.get_full_name }}'});
    </script>
	<br />

{% endfor %}
<div id="chart_div">
	
</div>
{% endblock %}